<template>
  <div class="box section clearfix">
    <el-form :inline="true" style="text-align: left" ref="query" :model="query">
      <el-row class="query">
        <el-form-item label="产品名：" prop="keyWord">
          <el-select v-model="query.productId" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="danger" @click="clearFun" v-no-more-click
            >清空</el-button
          >
          <el-button type="primary" @click="queryFun" v-no-more-click
            >搜索</el-button
          >
        </el-form-item>
        <el-col :span="24">
          <el-form-item>
            <el-button
              icon="el-icon-circle-plus-outline"
              size="small"
              type="primary"
              @click="addFun"
              v-no-more-click
              >新增</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column
        prop="productName"
        label="产品名称"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="contractName"
        label="合同名称"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="contractUrl"
        label="合同附件原名称"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="createName"
        label="创建人"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="updateName"
        label="更新人"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="updateTime"
        label="更新时间"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="upDateFun(scope.row)"
            style="color: #ffa42f"
            v-no-more-click
            >编辑</el-button
          >
          <!-- <el-button
            slot="reference"
            type="text"
            size="small"
            @click="delectFun(scope.row)"
            style="color: #409eff"
            v-no-more-click
            >删除</el-button
          > -->
          <el-popconfirm
            title="确定删除此数据吗？"
            @onConfirm="delectFun(scope.row)"
          >
            <el-button
              slot="reference"
              type="text"
              size="small"
              v-no-more-click
              style="color: #fb575e"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="ProductDia"
      :before-close="handleClose"
      append-to-body
      width="50%"
      top="30px"
    >
      <Product
        v-if="ProductDia"
        :productType="productType"
        :options="options"
        @refresh="refresh"
        :productForm="productForm"
      ></Product>
    </el-dialog>
  </div>
</template>

<script>
import {
  getContractPage,
  getContractType,
  getContractFindOne,
  deleteContract
} from "../../../src/assets/js/api";
import Product from "../../components/electronicContract/Product";
export default {
  name: "ProductContract",
  components: { Product },
  data() {
    return {
      query: {
        pageSize: 10,
        pageNo: 1,
        productId: null
      },
      total: 10,
      pages: 0,
      currentPage: 1,
      tableData: [],
      options: [],
      ProductDia: false,
      productType: "",
      productForm: {},
      title: ""
    };
  },
  created() {
    this.getList();
    this.getType();
  },
  methods: {
    getList() {
      getContractPage(this.query).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.currentPage = res.data.current;
          this.total = res.data.total;
          this.pages = res.data.pages;
        }
      });
    },
    // 新增编辑后刷新页面
    refresh() {
      this.ProductDia = false;
      this.getList();
    },
    // 获取产品下拉
    getType() {
      getContractType().then(res => {
        this.options = res.data;
      });
    },
    // 新增按钮
    addFun() {
      this.ProductDia = true;
      this.productType = "add";
      this.title = "新增";
    },
    // 编辑按钮
    upDateFun(row) {
      getContractFindOne(row.id).then(res => {
        if (res.code == 200) {
          this.ProductDia = true;
          this.productType = "update";
          this.productForm = res.data;
          this.title = "编辑";
        }
      });
    },
    // 删除按钮
    delectFun(row) {
      deleteContract(row.id).then(res => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 搜索按钮
    queryFun() {
      this.getList();
    },
    clearFun() {
      this.query.productId = null;
      this.query.pageSize = 10;
      this.query.pageNo = 1;
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped type="less">
::v-deep .el-table td {
  padding: 10px 0;
}
::v-deep .el-table th {
  padding: 10px 0;
}
.query ::v-deep .el-input__inner {
  height: 32px;
}
.query ::v-deep .el-input__icon {
  line-height: 32px;
}
.query ::v-deep .el-form-item {
  width: 320px;
}
.query ::v-deep .vue-treeselect__control {
  line-height: 30px;
  height: 32px;
}
.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder {
  line-height: 30px;
}
::v-deep .btn .el-button {
  width: 80px;
  height: 32px;
  line-height: 0;
}
::v-deep .el-table th > .cell {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(59, 157, 248, 0.1);
}
.box {
  position: relative;
  background: #fff;
  padding: 20px 20px 50px 20px;
}
::v-deep .el-pagination {
  position: absolute;
  margin-top: 20px;
  right: 0;
}
::v-deep .el-pagination__total {
  visibility: hidden;
}
.title {
  position: absolute;
  left: 0;
  margin-top: 15px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 21px;
}
</style>
